<template>
  <div>
    <div class="header">
      <van-sticky>
        <van-nav-bar
          title="菜品分类"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </div>
    <div class="productContent">
      <div class="categorySideBar">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item
            v-for="item in categoryData"
            :key="item.id"
            :title="item.name"
          />
        </van-sidebar>
      </div>
      <div class="productList">
        <van-card
          v-for="item in productData"
          :key="item.id"
          :num="item.number"
          :price="item.price"
          :desc="item.description"
          :title="item.name"
          :thumb="item.photo"
        >
        <template #footer>
          <van-stepper @change='numShopCar(item)' :default-value='0' :min='0' v-model="item.number" theme="round" button-size="22" disable-input />
        </template>
        </van-card>
        <div style="height:50px"></div>
        <!-- 提交订单购物车 -->
      <van-submit-bar :price="total * 100" button-text="提交订单" @submit="onSubmit" />

      </div>
    </div>
    
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      activeKey: 0,
      productCategoryId: "",
    };
  },
  created() {
    this.activeKey = this.$route.query.activeKey;
    this.productCategoryId = this.$route.query.productCategoryId;
    this.getCategoryDataVuex({ page: 1, pageSize: 200 });
    this.getProductDataVuex({
      page: 1,
      pageSize: 200,
      productCategoryId: this.productCategoryId,
    });
  },
  methods: {
    // 监听步进器发生改变
    //让步进器监听到的订单添加到购物车中
    numShopCar(item){
      // item 代表的是每一条订单
      console.log(item);
      // 声明点击步进器产生的订单
      let orderLine={
        productId:item.id,
        name:item.name,
        price:item.price,
        number:item.number
      }
      // 把订单添加到购物车里面
      this.addShopCar(orderLine);
      // console.log(orderLine);

    },
    // 提交订单事件 
    onSubmit(){

    },
    // 引入添加购物车得方法
    ...mapMutations('shopcar',['addShopCar']),
    ...mapActions("category", ["getCategoryDataVuex"]),
    ...mapActions("product", ["getProductDataVuex"]),
    onChange(index) {
      // console.log(this.categoryData[index].id);
      this.getProductDataVuex({
        page: 1,
        pageSize: 200,
        productCategoryId: this.categoryData[index].id,
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  computed: {
    ...mapState("category", ["categoryData"]),
    ...mapState("product", ["productData"]),
    // 引入购物车总金额
    ...mapGetters('shopcar',['total'])
  },
};
</script>

<style scoped>
/* 产品整体样式 */
.productContent{
  display: flex;
  height: calc(100vh - 100px);
}
/* 左侧侧边栏区域 */
.productContent .categorySideBar{
  width: 150px;
  resize: horizontal;
  overflow: auto; /*必须设置overflow属性，才能使resize生效*/
}
/* 右侧产品列表区域 */
.productContent .productList{
  flex: 1;
  overflow-y: auto;
  position: relative;
}
/* 侧边导航样式 */
.van-sidebar {
  width: 150px;
  overflow-y: auto;
}
/* 导航栏内容区样式 */
.van-sidebar-item{
  font-size: 16px;
  text-align: center;
  height: 3.5rem;
}
/* 选中颜色 */
.van-sidebar-item--select::before{
  background-color: #8430FF;
}
/* 顶部总价计算 */
.van-submit-bar__bar{
  width: 95%;
  position: absolute;
  bottom: 50px;
  background-color: white;
}

</style>